<template>
    <div id="registor">
        <!-- <img src="../../assets/registor/bg.png" alt=""> -->
        <div class="registor-box">
            <!-- <p class="topicon">&lt;</p> -->
           <div class="registor-containner">
                <p class="retitle">
                    欢迎加入宅寂
                </p>
                <div class="reform">
                    <form action="" >
                            <div class="rephone-box">
                                <input v-model="phone" type="text" name="phone" class="rephone" placeholder="请输入手机号">
                            </div>
                            <div class="repassword-box">
                                 <input v-model="password" type="password" name="password" class="repassword" placeholder="请输入密码">
                            </div>
                           
                            <input type="button" @click="handleClick" class="rebtn" value="注册">
                    </form>
                </div>
                <div class="refoot">
                    <span class="respan1">注册代表你已同意</span>
                    <span class="respan2">《用户协议》</span>
                </div>
           </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            phone:"",
            password:""
        }
    },
    methods:{
        handleClick(){
            console.log(this.phone,this.password)
        }
    },
    watch:{
        phone(v,s){
            console.log(v,s)
        }
    }
    
}
</script>
<style scoped>
    #registor{
        width: 1920px;
        height:900px;
        background-image: url("../../assets/registor/bg.png")
    }
    .registor-box{
        width:500px;
        height:600px;
        background-color:#fff;
        position:fixed;
        top:190px;
        left: 710px;
    }
    .topicon{
        line-height: 90px;
        margin-left:37px;
        font-size: 24px;
        font-weight: 900;
    }
    .retitle{
        width:300px;
        text-align: center;
        position: absolute;
        top:120px;
        font-size: 22px;
        line-height: 22px;
        left:100px;
    }
    .reform input{
        position:absolute;
        display: block;
        width:300px;
        border:0;
        line-height: 48px;
        height: 48px;
        border-bottom: 1px solid #ccc;
        outline: none;
        font-size: 16px;
        left: 100px;
    }
    .reform .rephone{
        top:165px;
    }
    .rephone:after{
        content:"";
        width:100px;
        height:100px;
        display:block;
        position:absolute;
        top:0px;
        right:0px;
        
    }

     .reform .repassword{
        top:213px;
    }
    .reform .rebtn{
        width:300px;
        height:50px;
        position:absolute;
        top:334px;
        left: 100px;
        color:#fff;
        font-size: 22px;
    }
    .reform .rebtn.active{
        background-color:green
    }
    .refoot{
        position:absolute;
        top:427px;
        left:100px;
        width:300px;
        text-align: center;
        color:#d2d2d2;
        font-size: 16px;
    }
    .refoot .respan2{
        color:#000;
    }
</style>
